<template>
	<view>
		<view class="container">
			<view class="submit-order">
				<!-- 收货地址 -->
				<view class="delivery-addr " @click="toAddrListPage">
					<view v-if="!userAddr" class="addr-bg ">
						<view class="add-addr">
							<view class="plus-sign-img">
								<image src="@/static/images/icon/plus-sign.png" />
							</view>
							<text>新增收货地址</text>
						</view>
						<view class="arrow empty" />
					</view>
					<view v-if="userAddr" class="addr-bg whole">
						<view class="addr-icon">
							<image src="@/static/images/icon/addr.png" />
						</view>
						<view class="user-info">
							<text class="item">
								{{ userAddr.receiver }}
							</text>
							<text class="item">
								{{ userAddr.mobile }}
							</text>
						</view>
						<view class="addr">
							{{ userAddr.province }}{{ userAddr.city }}{{ userAddr.area }}{{ userAddr.addr }}
						</view>
						<view class="arrow" />
					</view>
				</view>

				<!-- 商品详情 -->
				<view class="prod-item">
					<block v-for="(item, index) in orderItems" :key="index">
						<view class="item-cont" :data-ordernum="item.primaryOrderNo" @tap="toOrderDetailPage">
							<view class="prod-pic">
								<image :src="item.pic" />
							</view>
							<view class="prod-info">
								<view class="prodname">
									{{ item.prodName }}
								</view>
								<view class="prod-info-cont">
									{{ item.skuName }}
								</view>
								<view class="price-nums">
									<text class="prodprice">
										<text class="symbol">
											￥
										</text>
										<text class="big-num">
											{{ wxs.parsePrice(item.price)[0] }}
										</text>
										<text class="small-num">
											.{{ wxs.parsePrice(item.price)[1] }}
										</text>
									</text>
									<text class="prodcount">
										x{{ item.prodCount }}
									</text>
								</view>
							</view>
						</view>
					</block>

					<view class="total-num">
						<text class="prodcount">
							共{{ totalCount }}件商品
						</text>
						<view class="prodprice">
							合计：
							<text class="symbol">
								￥
							</text>
							<text class="big-num">
								{{ wxs.parsePrice(total)[0] }}
							</text>
							<text class="small-num">
								.{{ wxs.parsePrice(total)[1] }}
							</text>
						</view>
					</view>
				</view>

				<!-- 订单详情 -->
				<view class="order-msg">
					<view class="msg-item">
						<view class="item coupon" @tap="showCouponPopup">
							<text class="item-tit">
								优惠券：
							</text>
							<text v-if="!coupons.canUseCoupons" class="item-txt">
								暂无可用
							</text>
							<text class="coupon-btn">
								{{ coupons.totalLength ? coupons.totalLength : 0 }}张
							</text>
							<text class="arrow" />
						</view>
						<view class="item">
							<text>买家留言：</text>
							<input v-model="remarks" placeholder="给卖家留言">
						</view>
					</view>
				</view>

				<view class="order-msg">
					<view class="msg-item">
						<view class="item">
							<view class="item-tit">
								订单总额：
							</view>
							<view class="item-txt price">
								<text class="symbol">
									￥
								</text>
								<text class="big-num">
									{{ wxs.parsePrice(total)[0] }}
								</text>
								<text class="small-num">
									.{{ wxs.parsePrice(total)[1] }}
								</text>
							</view>
						</view>
						<view class="item">
							<view class="item-tit">
								运费：
							</view>
							<view class="item-txt price">
								<text class="symbol">
									￥
								</text>
								<text class="big-num">
									{{ wxs.parsePrice(transfee)[0] }}
								</text>
								<text class="small-num">
									.{{ wxs.parsePrice(transfee)[1] }}
								</text>
							</view>
						</view>
						<view class="item">
							<view class="item-tit">
								优惠金额：
							</view>
							<view class="item-txt price">
								<text class="symbol">
									-￥
								</text>
								<text class="big-num">
									{{ wxs.parsePrice(shopReduce)[0] }}
								</text>
								<text class="small-num">
									.{{ wxs.parsePrice(shopReduce)[1] }}
								</text>
							</view>
						</view>
						<view class="item payment">
							<view class="item-txt price">
								小计：
								<text class="symbol">
									￥
								</text>
								<text class="big-num">
									{{ wxs.parsePrice(actualTotal)[0] }}
								</text>
								<text class="small-num">
									.{{ wxs.parsePrice(actualTotal)[1] }}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部栏 -->
			<view class="submit-order-footer">
				<view class="sub-order">
					<view class="item-txt">
						合计：
						<view class="price">
							<text class="symbol">
								￥
							</text>
							<text class="big-num">
								{{ wxs.parsePrice(actualTotal)[0] }}
							</text>
							<text class="small-num">
								.{{ wxs.parsePrice(actualTotal)[1] }}
							</text>
						</view>
					</view>
				</view>
				<view class="footer-box" @tap="toPay">
					提交订单
				</view>
			</view>
		</view>

		<!-- 选择优惠券弹窗 -->
		<view v-if="popupShow" class="popup-hide">
			<view class="popup-box">
				<view class="popup-tit">
					<text>优惠券</text>
					<text class="close" @click="closePopup" />
				</view>
				<view class="coupon-tabs">
					<view :class="'coupon-tab ' + (couponSts==1?'on':'')" data-sts="1" @click="changeCouponSts">
						可用优惠券({{ coupons.canUseCoupons.length ? coupons.canUseCoupons.length : 0 }})
					</view>
					<view :class="'coupon-tab ' + (couponSts==2?'on':'')" data-sts="2" @tap="changeCouponSts">
						不可用优惠券({{ coupons.unCanUseCoupons.length ? coupons.unCanUseCoupons.length : 0 }})
					</view>
				</view>
				<view class="popup-cnt">
					<block v-if="couponSts == 1">
						<view v-for="(item, index) in coupons.canUseCoupons" :key="index">
							<coupon :item="item" order="true" can-use="true" @check-coupon="checkCoupon" />
						</view>
					</block>
					<block v-if="couponSts == 2">
						<view v-for="(item, index) in coupons.unCanUseCoupons" :key="index">
							<coupon :item="item" order="true" can-use="false" />
						</view>
					</block>
					<view class="botm-empty" />
				</view>
				<view v-if="couponSts==1" class="coupon-ok">
					<text @tap="choosedCoupon">
						确定
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from "../../utils/request-test";
	import number from "../../wxs/number";
	import {
		orderConfirm
	} from "../../api/mine.js"
	export default {
		data() {
			return {
				wxs: number(),
				orderEntry: '0', // 订单入口 0购物车 1立即购买
				userAddr: null,
				couponIds: [],
				coupons: {},
				total: 0,
				actualTotal: 0,
				orderItems: [],
				totalCount: 0,
				transfee: 0,
				shopReduce: '',
				remarks: '',
				couponSts: 1,
				popupShow: false
			}
		},
		methods: {
			/**
			 * 加载订单数据
			 */
			loadOrderData() {
				uni.showLoading({
					mask: true
				})
				let addrId = 0
				if (this.userAddr != null) {
					addrId = this.userAddr.addrId
				}
				let data = {}
				data.addrId = addrId
				data.orderItem = this.orderEntry === '1' ? JSON.parse(uni.getStorageSync('orderItem')) : undefined
				data.basketIds = this.orderEntry === '0' ? JSON.parse(uni.getStorageSync('basketIds')) : undefined
				data.couponIds = this.couponIds
				data.userChangeCoupon = 1

				orderConfirm(data)
					.then(({
						data
					}) => {
						this.userAddr = data.userAddr
						uni.hideLoading()
						let orderItemsData = []
						data.shopCartOrders[0].shopCartItemDiscounts.forEach(itemDiscount => {
							orderItemsData = this.orderItems.concat(itemDiscount.shopCartItems)
						})
						if (data.shopCartOrders[0].coupons) {
							const canUseCoupons = []
							const unCanUseCoupons = []
							data.shopCartOrders[0].coupons?.forEach(coupon => {
								if (coupon.canUse) {
									canUseCoupons.push(coupon)
								} else {
									unCanUseCoupons.push(coupon)
								}
							})
							this.coupons = {
								totalLength: data.shopCartOrders[0].coupons.length,
								canUseCoupons,
								unCanUseCoupons
							}
						}
						this.orderItems = orderItemsData,
						this.actualTotal = data.actualTotal,
						this.total = data.total,
						this.totalCount = data.totalCount,
						this.transfee = data.shopCartOrders[0].transfee,
						this.shopReduce = data.shopCartOrders[0].shopReduce
					})
					.catch(err => {
						uni.hideLoading()
						this.chooseCouponErrHandle(err)
					})
			},
			/**
			 * 优惠券选择出错处理方法
			 */
			chooseCouponErrHandle(res) {
				// 优惠券不能共用处理方法
				if (res.statusCode == 601) {
					uni.showToast({
						title: res.data,
						icon: 'none',
						duration: 3000,
						success: () => {
							this.couponIds = []
						}
					})
					setTimeout(() => {
						this.loadOrderData()
					}, 2500)
				}
			},
			/**
			 * 提交订单
			 */
			toPay() {
				if (!this.userAddr) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					})
					return
				}
				this.submitOrder()
			},
			submitOrder() {
				uni.showLoading({
					mask: true
				})
				/* http.request({
				   url: '/p/order/submit',
				   method: 'POST',
				   data: {
				     orderShopParam: [{
				       remarks: this.remarks,
				       shopId: 1
				     }]
				   }
				 })*/
				request("/p/order/submit", 'post', {
						orderShopParam: [{
							remarks: this.remarks,
							shopId: 1
						}]
					})
					.then(({
						data
					}) => {
						uni.hideLoading()
						this.normalPay(data.orderNumbers)
					})
			},

			/**
			 * 模拟支付，直接提交成功
			 * @param orderNumbers
			 */
			normalPay(orderNumbers) {
				uni.showLoading({
					mask: true
				})
				// http.request({
				//   url: '/p/order/normalPay',
				//   method: 'POST',
				//   data: {
				//     orderNumbers
				//   }
				// })
				request("/p/order/normalPay", "post", {
						orderNumbersL: this.orderNumbers
					})
					.then(({
						data
					}) => {
						uni.hideLoading()
						if (data) {
							uni.showToast({
								title: '模拟支付成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/index/payResult?sts=1&orderNumbers=' + this
										.orderNumbers
								})
							}, 1200)
						} else {
							uni.showToast({
								title: '支付失败！',
								icon: 'none'
							})
						}
					})
			},
			changeCouponSts(e) {
				this.couponSts = e.currentTarget.dataset.sts
			},
			showCouponPopup() {
				this.popupShow = true
			},
			closePopup() {
				this.popupShow = false
			},
			/**
			 * 去地址页面
			 */
			toAddrListPage() {
				uni.navigateTo({
					url: '/pages/delivery-address/delivery-address?order=0'
				})
			},
			/**
			 * 确定选择好的优惠券
			 */
			choosedCoupon() {
				this.loadOrderData()
				this.popupShow = false
			},
			/**
			 * 优惠券子组件发过来
			 */
			checkCoupon(e) {
				const index = this.couponIds.indexOf(e.detail.couponId)
				if (index === -1) {
					this.couponIds.push(e.detail.couponId)
				} else {
					this.couponIds.splice(index, 1)
				}
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {

			this.orderEntry = options.orderEntry
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			const pages = getCurrentPages()
			const currPage = pages[pages.length - 1]
			console.log(currPage)
			if (currPage.selAddress === 'yes') {
				// 将携带的参数赋值
				this.userAddr = currPage.item
			}
			// 获取订单数据
			this.loadOrderData()
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background: #f4f4f4;
	}

	.submit-order {
		margin-bottom: 100rpx;
		padding-bottom: 160rpx;

		.delivery-addr {
			position: relative;
			background: #fff;

			.addr-icon {
				width: 32rpx;
				height: 32rpx;
				display: block;
				position: absolute;
				left: 30rpx;
				top: 24rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.user-info {
				padding-top: 20rpx;
				line-height: 48rpx;
				word-wrap: break-word;
				word-break: break-all;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;

				.item {
					font-size: 30rpx;
					margin-right: 30rpx;
					vertical-align: top;
					display: inline-block;
				}
			}

			.addr {
				font-size: 26rpx;
				line-height: 36rpx;
				color: #999;
				width: 90%;
				padding-bottom: 20rpx;
				margin-top: 15rpx;
				word-wrap: break-word;
			}

			.arrow {
				width: 15rpx;
				height: 15rpx;
				border-top: 2rpx solid #777;
				border-right: 2rpx solid #777;
				transform: rotate(45deg);
				position: absolute;
				right: 30rpx;
				top: 60rpx;
			}

			.arrow.empty {
				top: 39rpx;
			}
		}
	}

	.delivery-addr {
		.addr-bg {
			.add-addr {
				.plus-sign {
					color: #eb2444;
					border: 2rpx solid #eb2444;
					padding: 0rpx 6rpx;
					margin-right: 10rpx;
				}

				font-size: 28rpx;
				color: #666;
				display: flex;
				align-items: center;
				padding: 30rpx 0;
			}

			padding: 0 30rpx;
		}

		.addr-bg.whole {
			padding: 0 39rpx 0 77rpx;
		}
	}

	.addr-bg {
		.add-addr {
			.plus-sign-img {
				width: 32rpx;
				height: 32rpx;
				font-size: 0;
				margin-right: 10rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.prod-item {
		background-color: #fff;
		margin-top: 15rpx;
		font-size: 28rpx;

		.item-cont {
			.prod-pic {
				image {
					width: 180rpx;
					height: 180rpx;
					width: 100%;
					height: 100%;
				}

				font-size: 0;
				display: block;
				width: 160rpx;
				height: 160rpx;
				overflow: hidden;
				background: #fff;
				margin-right: 16rpx;
			}

			display: flex;
			align-items: center;
			padding: 30rpx;
			border-bottom: 2rpx solid #f1f1f1;

			.prod-info {
				margin-left: 10rpx;
				font-size: 28rpx;
				width: 100%;
				position: relative;
				height: 160rpx;
				-webkit-flex: 1;
				-ms-flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				flex: 1;

				.prodname {
					font-size: 28rpx;
					line-height: 40rpx;
					max-height: 86rpx;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					word-break: break-all;
				}

				.prod-info-cont {
					color: #999;
					line-height: 40rpx;
					margin-top: 10rpx;
					font-size: 22rpx;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					word-break: break-all;
				}
			}
		}

		.order-num {
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;

			.clear-btn {
				width: 32rpx;
				height: 32rpx;
				font-size: 0;
				vertical-align: top;
				margin-top: 6rpx;
				margin-left: 42rpx;
				position: relative;

				&::after {
					content: " ";
					display: block;
					position: absolute;
					left: -10px;
					top: 1px;
					width: 1px;
					height: 12px;
					background: #ddd;
				}

				.clear-list-btn {
					width: 100%;
					height: 100%;
					vertical-align: middle;
				}
			}
		}

		.total-num {
			text-align: right;
			padding: 20rpx 30rpx;
			font-size: 28rpx;

			.prodprice {
				display: inline-block;
				color: #333;
			}

			.prodcount {
				margin-right: 20rpx;
			}
		}

		.price-nums {
			.prodprice {
				position: absolute;
				bottom: 0;
			}

			.prodcount {
				position: absolute;
				bottom: 5rpx;
				right: 0;
				color: #999;
				font-family: verdana;
			}
		}
	}

	.order-state {
		display: flex;
		align-items: center;
	}

	.order-msg {
		background: #fff;
		margin-top: 15rpx;
		padding: 0 30rpx;
		font-size: 28rpx;

		.msg-item {
			border-top: 2rpx solid #f1f1f1;

			&:first-child {
				border: 0;
			}

			.item {
				position: relative;
				display: flex;
				padding: 16rpx 0;
				align-items: center;

				.item-tit {
					line-height: 48rpx;
				}

				.item-txt {
					-webkit-box-flex: 1;
					-moz-box-flex: 1;
					flex: 1;
					font-family: arial;
					max-height: 48rpx;
					overflow: hidden;
					line-height: 48rpx;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					word-break: break-all;
				}

				.item-txt.price {
					padding: 0;
					text-align: right;
				}

				input {
					flex: 1;
				}

				.coupon-btn {
					display: block;
					margin: 0 30rpx;
					line-height: 28rpx;
					color: #999;
				}

				.arrow {
					width: 15rpx;
					height: 15rpx;
					border-top: 2rpx solid #999;
					border-right: 2rpx solid #999;
					transform: rotate(45deg);
					position: absolute;
					right: 0rpx;
				}
			}

			.item.payment {
				border-top: 2rpx solid #f1f1f1;
				color: #eb2444;
			}

			.item.coupon {
				border-bottom: 2rpx solid #e1e1e1;
			}
		}
	}

	.submit-order-footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		max-width: 750rpx;
		background: #fff;
		margin: auto;
		display: -webkit-flex;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		font-size: 26rpx;
		box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);

		.sub-order {
			flex: 1;
			margin: 0 30rpx;
			line-height: 100rpx;
			display: block;
			text-align: left;
			font-size: 28rpx;

			.item-txt {
				.price {
					display: inline;
					color: #eb2444;
					font-size: 28rpx;
				}
			}
		}

		.footer-box {
			padding: 0 10rpx;
			width: 200rpx;
			background: #eb2444;
			text-align: center;
			line-height: 100rpx;
			color: #fff;
		}
	}

	.clearfix {
		&:after {
			content: " ";
			display: table;
			clear: both;
		}
	}

	.popup-hide {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.popup-box {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 80%;
		overflow: hidden;
		background-color: #fff;
	}

	.popup-tit {
		position: relative;
		height: 46px;
		line-height: 46px;
		padding-left: 10px;
		font-size: 16px;
		color: #333;
		font-weight: bold;
	}

	.close {
		color: #aaa;
		border-radius: 12px;
		line-height: 20px;
		text-align: center;
		height: 20px;
		width: 20px;
		font-size: 18px;
		padding: 1px;
		top: 10px;
		right: 10px;
		position: absolute;

		&::before {
			content: "\2716";
		}
	}

	.coupon-tabs {
		display: flex;
		font-size: 14px;
		justify-content: space-around;
		border-bottom: 1px solid #f2f2f2;
	}

	.coupon-tab {
		padding: 10px 0;
	}

	.coupon-tab.on {
		border-bottom: 2px solid #eb2444;
		font-weight: 600;
	}

	.popup-cnt {
		height: calc(100% - 88px);
		overflow: auto;
		padding: 0 10px;
		background: #f4f4f4;
	}

	.coupon-ok {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 60px;
		line-height: 50px;
		font-size: 14px;
		text-align: center;
		box-shadow: 0px -1px 1px #ddd;

		text {
			border-radius: 20px;
			display: inline-block;
			height: 20px;
			line-height: 20px;
			width: 450rpx;
			padding: 7px;
			color: #fff;
			box-shadow: -1px 3px 3px #aaa;
		}
	}

	.botm-empty {
		height: 60px;
	}

	checkbox {
		.wx-checkbox-input {
			border-radius: 50%;
			width: 35rpx;
			height: 35rpx;
		}

		.wx-checkbox-input.wx-checkbox-input-checked {
			background: #eb2444;
			border-color: #eb2444;

			&::before {
				text-align: center;
				font-size: 22rpx;
				color: #fff;
				background: transparent;
				transform: translate(-50%, -50%) scale(1);
				-webkit-transform: translate(-50%, -50%) scale(1);
			}
		}
	}
</style>